<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Mdoules 特性</title>
</head>
<body>
    <!-- 通过给script 添加type=module的属性，就可以以ES Modules 的标准执行其中的JS代码 -->
    <script type="module">
        console.log('this is es modules')
    </script>
    <!-- 1.ESM 自动采用严格模式，忽略‘use strict' -->
    <script type="module">
        // 严格模式下全局作用域的this指向window，模块具有私有作用域，this指向undefined
        console.log(this)
    </script>
    <!-- 2.每个ES Modules 都是运行在单独的私有作用域中 -->
    <script type="module">
        var foo = 100
        console.log(foo)
    </script>
    <script type="module">
        // console.log(foo)
    </script>
    <!-- 3.ESM是通过CORS的方式请求外部js模块的，所以外部链接的服务端必须支持CORS才能够不被浏览器所中止，另外CORS不支持文件的访问，所以必须在http-server的环境下访问 -->
    <script type="module" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!-- 4.ES Modules中的script标签会自动延迟执行脚本  （defer延迟的意思）不会阻碍页面的显示-->
    <script type="module" src="./hello.js"></script>
</body>
</html>